<template>
<div class="box">
  <div class="header head-font">历史客流</div>
  <div class="tab-box">
    <span :class="{active:isActive==0}" @click="isActive=0">日</span>
    <span :class="{active:isActive==1}" @click="isActive=1">月</span>
    <span :class="{active:isActive==2}" @click="isActive=2">年</span>
  </div>
  <ul class="content-box">
    <li>
      <h3 class="title tit-font">历史同期客流同比</h3>
      <div class="chart-box" id="myChart1"></div>
    </li>
    <li>
      <h3 class="title tit-font">历史同期营收同比</h3>
      <div class="chart-box" id="myChart2"></div>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  name: 'History',
  data () {
    return {
      isActive: 0,
      data1: [457, 374, 398, 264, 398],
      data2: [384, 374, 305, 356, 368]
    }
  },
  mounted () {
    this.drawLine1()
    this.drawLine2()
  },
  methods: {
    drawLine1 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myChart1'))
      // 绘制图表
      var option = {
        grid: {
          top: '0',
          left: '4%',
          right: '4%',
          bottom: '8%'
        },
        title: {
          show: false,
          text: '历史同期客流同比',
          x: '20',
          y: '10',
          textStyle: {
            fontSize: 14,
            color: '#fff'
          }
        },
        legend: {
          show: false,
          top: 10,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 20, // 设置宽度
          itemHeight: 15 // 设置高度
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['总数', '散客', '团体', '线下', '线上'],
          axisTick: { // --坐标轴 刻度
            show: true // ---是否显示
          },
          axisLine: { // ---坐标轴 轴线
            show: true, // ---是否显示
            lineStyle: {
              color: 'rgba(202,202,204,0.5)',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: { // X轴文字
            show: true,
            interval: 0,
            textStyle: {
              fontSize: 12,
              color: '#999'
            }
          }
        },
        yAxis: {
          show: false,
          type: 'value',
          splitLine: { // 分割线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: { // 轴刻度值
            formatter: '{value}',
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          axisLine: { // ---坐标轴 轴线
            show: false // ---是否显示
          }
        },
        series: [{
          name: '今日',
          type: 'bar',
          barWidth: '15px',
          data: this.data1,
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(128,128,128,0.6)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(247,247,247,0.6)' // 100% 处的颜色
              }], false)
            }
          }
        }, {
          name: '同日',
          type: 'bar',
          barWidth: '15px',
          data: this.data2,
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(51,172,143,0.6)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(51,172,143,0)' // 100% 处的颜色
              }], false)
            }
          }
        }]
      }
      myChart.setOption(option)
      setTimeout(function () {
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0, // 显示第几个series
          dataIndex: 0 // 显示第几个数据
        })
      })
    },
    drawLine2 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      var option = {
        grid: {
          top: '0',
          left: '4%',
          right: '4%',
          bottom: '8%'
        },
        title: {
          show: false,
          text: '历史同期客流同比',
          x: '20',
          y: '10',
          textStyle: {
            fontSize: 14,
            color: '#fff'
          }
        },
        legend: {
          show: false,
          top: 10,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 20, // 设置宽度
          itemHeight: 15 // 设置高度
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['总数', '散客', '团体', '线下', '线上'],
          axisTick: { // --坐标轴 刻度
            show: true // ---是否显示
          },
          axisLine: { // ---坐标轴 轴线
            show: true, // ---是否显示
            lineStyle: {
              color: 'rgba(202,202,204,0.5)',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: { // X轴文字
            show: true,
            interval: 0,
            textStyle: {
              fontSize: 12,
              color: '#999'
            }
          }
        },
        yAxis: {
          show: false,
          type: 'value',
          splitLine: { // 分割线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: { // 轴刻度值
            show: false,
            formatter: '{value}',
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          axisLine: { // ---坐标轴 轴线
            show: false // ---是否显示
          }
        },
        series: [{
          name: '今日',
          type: 'bar',
          barWidth: '15px',
          data: this.data1,
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(128,128,128,0.6)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(247,247,247,0.6)' // 100% 处的颜色
              }], false)
            }
          }
        }, {
          name: '同日',
          type: 'bar',
          barWidth: '15px',
          data: this.data2,
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(51,172,143,0.6)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(51,172,143,0)' // 100% 处的颜色
              }], false)
            }
          }
        }]
      }
      myChart.setOption(option)
      setTimeout(function () {
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0, // 显示第几个series
          dataIndex: 0 // 显示第几个数据
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.tab-box{
  margin-top: 50/7.5vw;
  margin-bottom: 30/7.5vw;
  span{
    margin-right:80/7.5vw;
    padding:0 20/7.5vw;
    font-size: 36/7.5vw;
    font-family: PingFangSC-Medium;
    &.active{
      border-bottom: 6/7.5vw solid #33AC8F;
    }
  }
}
.content-box{
  li{
    background-color: #fff;
    border-radius: 4/7.5vw;
    padding:40/7.5vw 0;
    margin-bottom: 30/7.5vw;
    .title{
      padding:0 30/7.5vw;
      margin-bottom:40/7.5vw;
    }
    .chart-box{
      height: 500/7.5vw;
    }
  }
}
</style>
